import React, { useEffect } from 'react'
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';

function Home() {
    const onChange = (key: string) => {
        console.log(key);
    };
   
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '热搜榜',
            children: [
                <div>
                    <div style={{color:'red'}}>
                        为了老百姓的安居梦
                    </div>
                    <div style={{color:'green'}}>
                       美股再遇“黑色星期一”
                    </div>
                    <div style={{color:'yellow'}}>
                        双汇前任老总游牧突发心梗离世
                    </div>
                    <div>
                        67款APP违法收集使用个人信息被通报
                    </div>
                    <div>
                        关晓彤录制五四晚会 齐刘海造型超美
                    </div>
                </div>


            ],
        },
        {
            key: '2',
            label: '北京榜',
            children: [
                <div>
                    <div style={{color:'red'}}>
                      北京书市今日开逛  
                    </div>
                    <div style={{color:'green'}}>
                        当事人回应刘强东给自己送外卖
                    </div>
                    <div style={{color:'yellow'}}>
                        顺义、朝阳、通州间将添一条地铁快线
                    </div>
                </div>
            ],
        },
        {
            key: '3',
            label: '民生榜',
            children: [
                <div>
                    <div style={{color:'red'}}>
                        5号线被骂衣服脏乘客家属发声
                    </div>
                    <div style={{color:'green'}}>
                        北京公园的小众秘境都在哪儿
                    </div>
                    <div style={{color:'yellow'}}> 
                        房山区良乡镇原副镇长桥如被查
                    </div>
                </div>
            ],
        },
    ];
    return (
        <div style={{marginLeft:'100px'}}>
            <h2>百度热搜></h2>

            {/* 渲染 */}
            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
        </div>
    )
}

export default Home